
<style  lang="less">
    @import "fileAudit.less";
   </style>
   <template>
        <div class="container">
            <div class="magnify-content">
                <div class="magnify-img overflow">
                    <ul class="fl incomeInfo">
                        <li><h4>进件信息</h4></li>
                        <li><p>①身份证</p></li>
                        <li><p>②可核实的稳定工作或充足流水或房产证明</p></li>
                        <li><p>③驾照或档案编号或学车证明</p></li>
                        <li><p>学车证明:至少通过科目一考试,提供制式版的纸质考试成绩单或学车正规发票(不接受学车收据)</p></li>
                    </ul>
                    <div class="fl preview_img">
                        <img :src="previewImgSrc" alt=""  ref="previewImg">
                        <div class="magnify-footer">
                            <div class="magnify-toolbar">
                                <Button class="magnify-btn-prev" type="primary" size="small" @click="prevPic">上一张</Button>
                                <Button  class="magnify-btn-next" type="primary" size="small" @click="nextPic">下一张</Button>
                                <Button  class="magnify-btn-rotateLeft" type="primary" size="small" @click="leftRotate">左旋</Button>
                                <Button  class="magnify-btn-rotateRight" type="primary" size="small" @click="rightRotate">右旋</Button> 
                                <Button  class="magnify-btn-zoomIn" type="primary" size="small" @click="zoomIn">放大</Button>
                                <Button  class="magnify-btn-zoomOut"  type="primary" size="small" @click="zoomOut">缩小</Button>
                                <Button  class="magnify-btn-actualSize" type="primary" size="small" @click="resetPic">重置</Button>
                                <Button  class="magnify-btn-actualSize" type="primary" size="small">废弃</Button>
                                <Button  class="magnify-btn-actualSize" type="primary" size="small">恢复</Button>
                                <Button  class="magnify-btn-save" type="primary" size="small" @click="saveSolute">保存旋转方案</Button>
                                <Button  class="magnify-btn-save" type="primary" size="small">历史版本</Button>
                                <Button  class="magnify-btn-save" type="primary" size="small">查看签名</Button>
                                <Button  class="magnify-btn-save" type="primary" size="small">影像件总数5,成功5</Button>
                            </div>
                        </div>

                    </div>
                    <div class="fl preview_imgInfo">
                        <p class="select">
                            <span>
                                业务类型
                            </span>
                            <Select v-model="businessTypeNo">
                                <Option v-for="item in businessType" :value="item.dataNo" :key="item.dataNo" :label="item.dataNm">
                                    {{item.dataNm}}
                                </Option>
                            </Select>
                        </p>
                        <p class="select">
                            <span>
                                图片服务器
                            </span>
                            <Select v-model="imgServiceNo">
                                <Option v-for="item in businessType" :value="item.dataNo" :key="item.dataNo" :label="item.dataNm">
                                    {{item.dataNm}}
                                </Option>
                            </Select>
                        </p>
                        <ul>
                            <li><span>申请人照片</span></li>
                            <li><span>共借人照片</span></li>
                            <li><span>担保人照片</span></li>
                            <li><span>身份认证</span></li>
                            <li><span>申请书</span></li>
                            <li><span>住址信息</span></li>
                            <li><span>收入证明</span></li>
                            <li><span>关系证明</span></li>
                            <li><span>驾驶证</span></li>
                            <li><span>其他</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="thum">
                <li v-for="(item,index) in thumImgSrc" :key="index" @click="selectThumImg($event,index)" :class="{'cur':curIndex==index}"><img :src="item.imgSrc"></li>
            </ul>
        </div>  
   </template>
   <script>
   export default {
      data(){
          return{
           previewImgSrc:"",
           curIndex:0,
           totalIndex:0,
           keepRotate:[],
           thumImgSrc:[
               {
                   imgSrc:require("@/assets/images/0.png"),
               },
               {
                   imgSrc:require("@/assets/images/1.png"),
               },
               {
                   imgSrc:require("@/assets/images/2.png"),
               },
               {
                   imgSrc:require("@/assets/images/3.jpg"),
               },
                {
                   imgSrc:require("@/assets/images/4.jpg"),
               }
           ],
           businessTypeNo:"",
           imgServiceNo:"",
           businessType:[
                {
                    dataNo:"00",
                    dataNm:"零售审批0"
                },
                {
                    dataNo:"01",
                    dataNm:"零售审批1"
                },
            ] 
          }
      },
      created(){
          this.totalIndex=this.thumImgSrc.length-1;
          this.previewImgSrc=this.thumImgSrc[this.curIndex].imgSrc;
          for(let i=0;i<=this.totalIndex;i++){
              let obj={
                  deg:0,
                  scale:1,
                  isSave:false,
              }
   
              this.keepRotate.push(obj)
          }
      },
      methods:{
           selectThumImg(event,index){
               this.curIndex=index;
               this.previewImgSrc=event.target.getAttribute('src');
               console.log(this.curIndex,"this.curIndex")
           },
           // 点击上一张
           prevPic(){
               if(this.curIndex==0){
                   this.curIndex=this.totalIndex;
               }else{
                   this.curIndex--
               }
               this.previewImgSrc=this.thumImgSrc[this.curIndex].imgSrc;
               if(!this.keepRotate[this.curIndex].isSave){
                   this.resetPic();
               }else{
                    this.setStyle();
               }
           },
           // 点击下一张
           nextPic(){
               if(this.curIndex==this.totalIndex){
                   this.curIndex=0;
               }else{
                   this.curIndex++;
               }
               this.previewImgSrc=this.thumImgSrc[this.curIndex].imgSrc;
               if(!this.keepRotate[this.curIndex].isSave){
                   this.resetPic();
               }else{
                   this.setStyle(); 
               }
           },
           //左旋转
           leftRotate(){
               this.keepRotate[this.curIndex].deg-=15;
                this.setStyle();
           },
           // 右旋转
           rightRotate(){
               this.keepRotate[this.curIndex].deg+=15;
               this.setStyle();
           },
           //重置
           resetPic(){
               this.keepRotate[this.curIndex].deg=0;
               this.keepRotate[this.curIndex].scale=1;
               this.keepRotate[this.curIndex].isSave=false;
               this.setStyle();
           },
           // 设置图片样式
           setStyle(){
               this.$refs.previewImg.style.transform="translate(-50%, -50%) rotate("+this.keepRotate[this.curIndex].deg+"deg) scale("+this.keepRotate[this.curIndex].scale+")";
           },
           // 保存旋转方案
           saveSolute(){
               this.keepRotate[this.curIndex].isSave=true;
           },
           // 放大
           zoomIn(){
               this.keepRotate[this.curIndex].scale+=0.1
               this.setStyle();
           },
           // 缩小
           zoomOut(){
               this.keepRotate[this.curIndex].scale-=0.1
               if(this.keepRotate[this.curIndex].scale<=0.1){
                   this.keepRotate[this.curIndex].scale=0.1
               }
               this.setStyle();
           }
      }
   }
   </script>